<!DOCTYPE html>
<html lang="en">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<head>
    <meta charset="UTF-8">
    <title>Registration page</title>
    <style>
        
        .rg_layout {
            width: 900px;
            height: 600px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;
        }
        
        .rg_left {
            float: left;
            margin: 15px;
        }
        .rg_center {
            float: left;
        }
        .rg_right {
            float: right;
            margin: 15px;
        }
        
        .rg_left > p:first-child {
            color:#FFD026;
            font-size: 20px;
        }

        .rg_left > p:last-child {
            color:#A6A6A6;
            font-size: 20px;
        }
        
        .rg_right > p:first-child {
            font-size: 15px;

        }
        .rg_right p a {
            color:pink;
        }
        
        .td_left {
            width: 100px;
            height: 45px;
            text-align: right;
        }
        .td_right {
            padding-left: 50px ;
        }
        
        #username, #password,#re_password, #email, #name, #tel, #birthday, #checkcode,
        #age, #weight, #height, #doc_id, #doc_visit_dates, #annual_checkups{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        
        #checkcode {
            width: 110px;
        }
        
        #img_check {
            height: 32px;
            vertical-align: middle;
        }
        
        #btn_sub {
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }
        
        .error {
            color:red;
        }
        #td_sub {
            padding-left: 150px;
        }
    </style>
    <script>
        window.onload = function(){
            document.getElementById("btn_sub").onclick = function(){
                var flag0 = checkUsername();
                var flag1 = checkPassword();
                var flag4 = checkRePassword();
                console.log($("#username").val())
                console.log($('input:radio[name="gender"]:checked').val())
                if(flag0&&flag1&&flag4){
                    $.ajax({
                        url: "/Registration/insertdoctor", 
                        type: "POST",  
                        data:{
                          'username':$("#username").val(),
                          'password':$("#password").val(),
                          },
                          success: function (result) {
                              
                              if(result.message == "success"){
                                  
                                console.log('you id is: ',result.id)
                                alert("register success")
                                location.href="/Registration/success?id="+result.id
                              }
                              else{

                                alert("register failed")
                              }
                          }
                        });
                }
                else{
                    alert("Incorrect")
                }
            };
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
            document.getElementById("re_password").onblur = checkRePassword;
        };
        
        function checkUsername(){
            var username = document.getElementById("username").value;
            var reg_username = /^\w{6,12}$/;
            var flag = reg_username.test(username);
            var s_username = document.getElementById("s_username");
            if(flag){
                s_username.innerHTML = "<font color='green'>ok</font>";
                return 1;
            }else{
                s_username.innerHTML = "Incorrect username format";
                return 0;
            }
           
        }
        
        function checkPassword(){
            var password = document.getElementById("password").value;
            var reg_password = /^\w{6,12}$/;
            var flag = reg_password.test(password);
            var s_password = document.getElementById("s_password");
            if(flag){
                s_password.innerHTML = "<font color='green'>ok</font>";
                return 1;
            }
            else{
                s_password.innerHTML = "Incorrect password format";
                return 0;
            }
        }
        function checkRePassword(){
            var re_password = document.getElementById("re_password").value;
            console.log("repassword",re_password)
            var password = document.getElementById("password").value;
            var res_password = document.getElementById("res_password");
            if (re_password == ""){
                res_password.innerHTML = "empty!";
                return 0;
            }
            else if(re_password==password){
                res_password.innerHTML = "<font color='green'>ok</font>";
                return 1;
            }
            else{
                res_password.innerHTML = "inconsistent";
                return 0;
            }
        }

    </script>
</head>
<body>

<div class="rg_layout">

    <div class="rg_left">
        <p>DOCTOR REGISTER</p>
    </div>

    <div class="rg_center">
        <div class="rg_form">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">user name*</label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder="enter one user name">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password"> password*</label></td>
                        <td class="td_right">
                            <input type="password" name="password" id="password" placeholder="Please input a password">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="re_password">comfirm password*</label></td>
                        <td class="td_right">
                            <input type="password" name="re_password" id="re_password" placeholder="Please repeat your password">
                            <span id="res_password" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="register"></td>
                    </tr>
                </table>
        </div>
        <div class="rg_right">
            <p>Existing account?<a href="/Login">Log in now</a></p>
        </div>
    
    </div>


</div>

</body>
</html>
